import 'dart:async';

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../services/ityingFonts.dart';
import '../../../services/screebAdapter.dart';

import '../controllers/productContent_controller.dart';
import 'firstPage_view.dart';
import 'secondPage_view.dart';
import 'thirdPage_view.dart';
import 'cartItemNum_view.dart';

class ProductContentView extends GetView<ProductContentController> {
  const ProductContentView({super.key});

  // appbar
  Widget _appBar(BuildContext context) {
    return Obx(() => AppBar(
          // tabs
          title: Container(
            width: ScreenAdapter.width(400),
            height: ScreenAdapter.height(96),
            child: controller.showTabs.value
                ? Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: controller.tabsList.map((v) {
                      return InkWell(
                        onTap: () {
                          controller.changeSelectTabsIndex(v['id']);
                          // 跳转到指定容器
                          if (v['id'] == 1) {
                            Scrollable.ensureVisible(
                                controller.gk1.currentContext as BuildContext,
                                duration: const Duration(milliseconds: 1000));
                          } else if (v['id'] == 2) {
                            Scrollable.ensureVisible(
                                controller.gk2.currentContext as BuildContext,
                                duration: const Duration(milliseconds: 1000));
                            // 修正
                            Timer.periodic(const Duration(milliseconds: 101),
                                (timer) {
                              controller.scrollController.jumpTo(
                                  controller.scrollController.position.pixels -
                                      ScreenAdapter.height(120));
                            });
                          } else {
                            Scrollable.ensureVisible(
                                controller.gk3.currentContext as BuildContext,
                                duration: const Duration(milliseconds: 1000));
                            // 修正
                            Timer.periodic(const Duration(milliseconds: 101),
                                (timer) {
                              controller.scrollController.jumpTo(
                                  controller.scrollController.position.pixels -
                                      ScreenAdapter.height(110));
                            });
                          }
                        },
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              v['title'],
                              style: TextStyle(
                                  fontSize: ScreenAdapter.fontSize(36)),
                            ),
                            v['id'] == controller.selectedTabsIndex.value
                                ? Container(
                                    margin: EdgeInsets.only(
                                        top: ScreenAdapter.height(10)),
                                    width: ScreenAdapter.width(100),
                                    height: ScreenAdapter.height(4),
                                    color: Colors.red.shade800,
                                  )
                                : Container(
                                    margin: EdgeInsets.only(
                                        top: ScreenAdapter.height(10)),
                                    width: ScreenAdapter.width(100),
                                    height: ScreenAdapter.height(4),
                                  )
                          ],
                        ),
                      );
                    }).toList(),
                  )
                : const Text(''),
          ),
          actions: [
            Container(
              margin: EdgeInsets.only(right: ScreenAdapter.width(10)),
              width: ScreenAdapter.width(100),
              height: ScreenAdapter.width(100),
              alignment: Alignment.center,
              child: ElevatedButton(
                  onPressed: () {},
                  style: const ButtonStyle(
                      padding: MaterialStatePropertyAll(EdgeInsets.all(0)),
                      alignment: Alignment.center,
                      backgroundColor: MaterialStatePropertyAll(Colors.black12),
                      foregroundColor: MaterialStatePropertyAll(Colors.white),
                      shape: MaterialStatePropertyAll(CircleBorder())),
                  child: const Icon(Icons.file_upload_outlined)),
            ),
            Container(
              margin: EdgeInsets.only(right: ScreenAdapter.width(10)),
              width: ScreenAdapter.width(100),
              height: ScreenAdapter.width(100),
              alignment: Alignment.center,
              child: ElevatedButton(
                  onPressed: () {
                    showMenu(
                        color: Colors.black87.withOpacity(0.5),
                        context: context,
                        position: RelativeRect.fromLTRB(
                            ScreenAdapter.width(800),
                            ScreenAdapter.height(220),
                            ScreenAdapter.width(20),
                            0),
                        items: [
                          PopupMenuItem(
                              child: Row(
                            children: const [
                              Icon(
                                Icons.home,
                                color: Colors.white,
                              ),
                              Text(
                                '首页',
                                style: TextStyle(color: Colors.white),
                              )
                            ],
                          )),
                          PopupMenuItem(
                              child: Row(
                            children: const [
                              Icon(
                                Icons.message,
                                color: Colors.white,
                              ),
                              Text(
                                '消息',
                                style: TextStyle(color: Colors.white),
                              )
                            ],
                          )),
                          PopupMenuItem(
                              child: Row(
                            children: const [
                              Icon(
                                Icons.star,
                                color: Colors.white,
                              ),
                              Text(
                                '收藏',
                                style: TextStyle(color: Colors.white),
                              )
                            ],
                          )),
                        ]);
                  },
                  style: const ButtonStyle(
                      padding: MaterialStatePropertyAll(EdgeInsets.all(0)),
                      alignment: Alignment.center,
                      backgroundColor: MaterialStatePropertyAll(Colors.black12),
                      foregroundColor: MaterialStatePropertyAll(Colors.white),
                      shape: MaterialStatePropertyAll(CircleBorder())),
                  child: const Icon(Icons.more_horiz_rounded)),
            ),
          ],
          leading: Container(
            alignment: Alignment.center,
            child: Container(
              margin: EdgeInsets.only(right: ScreenAdapter.width(10)),
              width: ScreenAdapter.width(100),
              height: ScreenAdapter.width(100),
              alignment: Alignment.center,
              child: ElevatedButton(
                  onPressed: () {
                    Get.back();
                  },
                  style: const ButtonStyle(
                      padding: MaterialStatePropertyAll(EdgeInsets.all(0)),
                      alignment: Alignment.center,
                      backgroundColor: MaterialStatePropertyAll(Colors.black12),
                      foregroundColor: MaterialStatePropertyAll(Colors.white),
                      shape: MaterialStatePropertyAll(CircleBorder())),
                  child: const Icon(Icons.arrow_back_ios_new_outlined)),
            ),
          ),
          centerTitle: true,
          // 投影北京
          backgroundColor: Colors.white.withOpacity(controller.opcity.value),
          // 取消阴影
          elevation: 0,
        ));
  }

  // 内容区域
  Widget _body() {
    return SingleChildScrollView(
      controller: controller.scrollController,
      child: Column(
        children: [
          FirstPageView(showAttr),
          SecondPageView(_subHeader),
          ThirdPageView(),
        ],
      ),
    );
  }

  // 底部导航
  Widget _bottom() {
    return Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: Container(
          height: ScreenAdapter.height(160),
          width: double.infinity,
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                  top: BorderSide(
                      width: ScreenAdapter.width(2), color: Colors.black12))),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(
                width: ScreenAdapter.width(200),
                height: double.infinity,
                child: Column(children: [
                  const Icon(Icons.shopping_cart),
                  Text(
                    '购物车',
                    style: TextStyle(fontSize: ScreenAdapter.fontSize(32)),
                  )
                ]),
              ),
              Expanded(
                  flex: 1,
                  child: Container(
                    height: ScreenAdapter.height(120),
                    margin: EdgeInsets.only(right: ScreenAdapter.width(20)),
                    child: ElevatedButton(
                        style: ButtonStyle(
                            backgroundColor: const MaterialStatePropertyAll(
                                Color.fromRGBO(255, 135, 0, 0.9)),
                            foregroundColor:
                                const MaterialStatePropertyAll(Colors.white),
                            shape: MaterialStatePropertyAll(
                                RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(60)))),
                        onPressed: () {
                          showAttr(2);
                        },
                        child: const Text('加入购物车')),
                  )),
              Expanded(
                  flex: 1,
                  child: Container(
                    height: ScreenAdapter.height(120),
                    margin: EdgeInsets.only(right: ScreenAdapter.width(20)),
                    child: ElevatedButton(
                        style: ButtonStyle(
                            backgroundColor:
                                const MaterialStatePropertyAll(Colors.red),
                            foregroundColor:
                                const MaterialStatePropertyAll(Colors.white),
                            shape: MaterialStatePropertyAll(
                                RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(60)))),
                        onPressed: () {
                          showAttr(3);
                        },
                        child: const Text('立即购买')),
                  )),
            ],
          ),
        ));
  }

// 显示筛选
// 传入的值 1标识点击的是筛选属性，2标识点击的是加入购物车，3标识点击的是立即购买
  void showAttr(int action) {
    Get.bottomSheet(GetBuilder<ProductContentController>(
      init: controller,
      builder: (controller) {
        return Container(
          height: ScreenAdapter.height(1500),
          width: double.infinity,
          padding: EdgeInsets.all(ScreenAdapter.width(20)),
          color: Colors.white,
          child: Stack(
            children: [
              ListView(children: [
                ...controller.pcontent.value.attr!.map((v) {
                  return Wrap(
                    children: [
                      Container(
                        padding: EdgeInsets.only(
                            top: ScreenAdapter.height(20),
                            left: ScreenAdapter.width(20)),
                        width: ScreenAdapter.width(1040),
                        child: Text(
                          v.cate!,
                          style: const TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      Container(
                        width: ScreenAdapter.width(1040),
                        child: Wrap(
                          children: v.attrList!.map((item) {
                            return InkWell(
                              onTap: () {
                                controller.changeAttr(v.cate, item['title']);
                              },
                              child: Container(
                                margin: EdgeInsets.all(ScreenAdapter.width(20)),
                                child: Chip(
                                    padding: EdgeInsets.only(
                                        left: ScreenAdapter.width(20),
                                        right: ScreenAdapter.width(20)),
                                    backgroundColor: item['checked'] == true
                                        ? Colors.red
                                        : const Color.fromARGB(
                                            31, 233, 213, 213),
                                    label: Text(item["tltle"])),
                              ),
                            );
                          }).toList(),
                        ),
                      )
                    ],
                  );
                }).toList(),
                Padding(
                  padding: EdgeInsets.only(top: ScreenAdapter.height(20)),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Text(
                        "数量",
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      CartItemNum()
                    ],
                  ),
                )
              ]),
              Positioned(
                  right: 2,
                  top: 0,
                  child: IconButton(
                      onPressed: () {
                        Get.back();
                      },
                      icon: const Icon(Icons.close))),
              Positioned(
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: action == 1
                      ? Row(
                          children: [
                            Expanded(
                                flex: 1,
                                child: Container(
                                  height: ScreenAdapter.height(120),
                                  margin: EdgeInsets.only(
                                      right: ScreenAdapter.width(20)),
                                  child: ElevatedButton(
                                      style: ButtonStyle(
                                          backgroundColor:
                                              const MaterialStatePropertyAll(
                                                  Color.fromRGBO(
                                                      255, 135, 0, 0.9)),
                                          foregroundColor:
                                              const MaterialStatePropertyAll(
                                                  Colors.white),
                                          shape: MaterialStatePropertyAll(
                                              RoundedRectangleBorder(
                                                  borderRadius:
                                                      BorderRadius.circular(
                                                          60)))),
                                      onPressed: () {
                                        controller.addCart();
                                      },
                                      child: const Text('加入购物车')),
                                )),
                            Expanded(
                                flex: 1,
                                child: Container(
                                  height: ScreenAdapter.height(120),
                                  margin: EdgeInsets.only(
                                      right: ScreenAdapter.width(20)),
                                  child: ElevatedButton(
                                      style: ButtonStyle(
                                          backgroundColor:
                                              const MaterialStatePropertyAll(
                                                  Colors.red),
                                          foregroundColor:
                                              const MaterialStatePropertyAll(
                                                  Colors.white),
                                          shape: MaterialStatePropertyAll(
                                              RoundedRectangleBorder(
                                                  borderRadius:
                                                      BorderRadius.circular(
                                                          60)))),
                                      onPressed: () {
                                        controller.buy();
                                      },
                                      child: const Text('立即购买')),
                                ))
                          ],
                        )
                      : Row(
                          children: [
                            ElevatedButton(
                                onPressed: () {
                                  if (action == 2) {
                                    // 加入购物侧
                                    controller.addCart();
                                  } else {
                                    // 立即购买
                                    controller.buy();
                                  }
                                },
                                child: const Text('确定'))
                          ],
                        ))
            ],
          ),
        );
      },
    ));
  }

  // 中部导航
  Widget _subHeader() {
    return Obx(() => Container(
          color: Colors.white,
          height: ScreenAdapter.height(120),
          child: Row(
            children: controller.subTabsList.map((v) {
              return Expanded(
                  flex: 1,
                  child: InkWell(
                    onTap: () {
                      controller.changeSelectSunTabsIndex(v["id"]);
                    },
                    child: Container(
                      alignment: Alignment.center,
                      child: Text(
                        '${v["title"]}',
                        style: TextStyle(
                            color: controller.selectSubTabsIndex == v["id"]
                                ? Colors.red
                                : Colors.black87),
                      ),
                    ),
                  ));
            }).toList(),
          ),
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: PreferredSize(
          preferredSize: Size.fromHeight(ScreenAdapter.height(120)),
          child: _appBar(context)),
      body: Stack(
        children: [
          _body(),
          _bottom(),
          Obx(() => controller.showSubHeaderTabs.value
              ? Positioned(
                  left: 0,
                  top: ScreenAdapter.getStatusBarHeight() +
                      ScreenAdapter.height(118),
                  right: 0,
                  child: _subHeader(),
                )
              : const Text(''))
        ],
      ),
    );
  }
}
